<div th:fragment="html">
    <div id="myFollowDiv">
        <table class="inputTable ">
            <tr>
                <td width="20%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金代码:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="followMap.fundcode">
                </td>
                <td width="10%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金名称:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="followMap.fundname">
                </td>
                <td width="10%" align="right">
                    <span data-toggle="tooltip" data-placement="top">基金类型:</span>
                </td>
                <td width="20%">
                    <input type="text" class="form-control" v-model="followMap.fundtype">
                </td>
            </tr>
            <tr>
                <td colspan="4"></td>
                <td>
                    <button type="button" class="btn btn-success" @click="querymyFollow(1)">查询</button>
                </td>
            </tr>
        </table>

        <table class="table table-bordered table-condensed">
            <thead>
            <th align="center" colspan="6">基金代码及名称</th>
            </thead>
            <tbody>
            <tr>
                <td width="10%">ID</td>
                <td width="20%">基金代码</td>
                <td width="25%">基金名称</td>
                <td width="15%">基金类型</td>
                <td width="10%">手续费率(%)</td>
                <td width="10%">操作</td>
            </tr>
            <tr v-for="bean in myFollows">
                <td>{{bean.id}}</td>
                <td>{{bean.fundcode}}</td>
                <td>{{bean.fundMain.fundname}}</td>
                <td>{{bean.fundMain.fundtype}}</td>
                <td>{{bean.fundMain.commissionRate}}</td>
                <td>
                    <button type="button" class="btn btn-success" @click="unfollow(bean.id)">取消关注</button>
                </td>
            </tr>
            </tbody>
        </table>

        <!--    分页-->
        <div style="text-align:center;">
            <div th:replace="include/page::html"></div>
        </div>

    </div>
    <script>
        $(function () {
            var myFollowVue = {
                followMap:{fundcode:'',fundname:'',fundtype:''},
                myFollows: [],
                pagination: {},
            };
            var vue = new Vue({
                el: '#myFollowDiv',
                data: myFollowVue,
                mounted: function () {
                    this.$nextTick(function () {
                        this.querymyFollow(1);
                    });
                },
                methods: {
                    querymyFollow: function (start) {
                        if(undefined==vue.pagination.size)
                            vue.pagination.size=5;

                        var url = "/fundfollows/list/" + vue.pagination.size + "/" + start;
                        axios.post(url,vue.followMap).then(function (response) {
                            vue.pagination = response.data.pagination;
                            vue.myFollows = vue.pagination.records;
                        });
                    },
                    ChangePageSize: function () {
                        vue.queryfundData(vue.pagination.current);
                    },
                    jump: function(page){
                        if('first'== page && !vue.pagination.isfirst)
                            vue.queryfundData(1);
                        else if('pre'== page && !vue.pagination.isfirst)
                            vue.queryfundData(vue.pagination.current-1);
                        else if('next'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.current+1);
                        else if('last'== page && !vue.pagination.islast)
                            vue.queryfundData(vue.pagination.pages);
                    },
                    jumpByNumber: function(start){
                        if(vue.pagination.current != start){
                            vue.queryfundData(start);
                        }
                    },
                }
            });
        });
    </script>

</div>
